<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      日志
    </div>
    <div style="margin-left: 400PX">
      <el-input v-model="systemLogId" placeholder="日志ID"
                style="width: 200px;margin-left: 40px" clearable/>
      <el-input v-model="userId" placeholder="用户ID"
                style="width: 200px;margin-left: 40px" clearable/>
      <el-select v-model="roleName" placeholder="角色"
                 style="width: 200px;margin-left: 40px" clearable>
        <el-option
          v-for="item in roleList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-button type="primary" @click="selectAll"
                 style="margin-left: 40px">查询
      </el-button>
      <el-button style="margin-left: 40px" @click="check">重置</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-table :data="selectList" height="659px" border style="width: 100%">
        <el-table-column align="center" fixed prop="systemLogId" sortable label="日志ID"/>
        <el-table-column align="center" fixed prop="userId" sortable label="用户ID"/>
        <el-table-column align="center" fixed prop="roleName" sortable label="用户角色"/>
        <el-table-column align="center" fixed prop="createTime" sortable label="操作时间"/>
        <el-table-column align="center" fixed prop="useTableName" sortable label="操作表名"/>
        <el-table-column align="center" fixed prop="useTableDataIdBefore" sortable label="操作前数据"/>
        <el-table-column align="center" fixed prop="useTableDataIdAfter" sortable label="操作后数据"/>
        <el-table-column align="center" fixed prop="useType" sortable label="操作类型"/>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { insert, queryAll, update } from '@/api/customer'
import { querySystemLog } from '@/api/systemLog'

export default {
  name: 'systemLog',
  computed: {
    ...mapGetters([
    ])
  },
  // 页面参数
  data() {
    return {
      systemLogId: '',
      userId: '',
      roleName: '',
      selectList: [],
      roleList: [
        { id: 1, name: '管理员' },
        { id: 2, name: '员工' }
      ]
    }
  },
  // 页面初始化加载方法
  mounted() {
    this.selectAll()
  },
  // 页面内事件和方法
  methods: {
    selectAll() {
      querySystemLog({
        systemLogId: this.systemLogId,
        userId: this.userId,
        roleName: this.roleName
      }).then(
        response => {
          this.selectList = response.data
        }
      )
    },
    check() {
      this.systemLogId = ''
      this.userId = ''
      this.roleName = ''
      this.selectAll()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
